<template>
    <div class="comment">
        <div class="img" :style="{'background':(data.sex==1?'rgb(85, 177, 249)':'rgb(239, 139, 186)')}">
            <span> {{data.userName.length >=3?data.userName.substring(1):data.userName}}</span>
        </div>   
        <div class="content">
             <span style="color: #eb7350;">{{data.userName}}</span> 
             <span>
                 <p style="margin-top:3px;margin-bottom:3px; text-indent: 2em;color: #333;">{{data.content}}</p>
                 <span  style="color:#1890ff;cursor: pointer;" @click="data.isShow = !data.isShow"> <a-icon type="link" /><span style="margin-left:2px">{{data.files.length}}</span></span>
             </span>
             <transition name="fade">
                 <div class="files" v-show="data.isShow">
                  <ul>
                    <li style="cursor: pointer;font-size:14px;color:#1890ff;" v-for="(item,index) in data.files" :key="index">{{item.fileName}}</li>
                 </ul>
             </div>
             </transition>    
             
             <span >{{data.date}}</span>
        </div>
    </div>
    
</template>
<script>
export default {
    name : 'Comment',
    components:{
    },
    props:{
        data:{
            type : Object,
            default:()=>{
                return{
                    userName:'',
                    sex:0,
                    content:'',
                    date:'',
                    isShow:false,
                    files:[]                     
                    
                }
            }
        }
    }
}
</script>
<style scoped>
.comment{
    width: 100%;
    display: flex;
    margin-bottom:5px ;
 }
.content{
    flex: 1;
    overflow: hidden;
    font-size: 12px;
    margin-left:5px;
    display: flex;
    flex-direction: column;
}
.img{
    width:36px;
    height:36px;
    border-radius: 50%;
    font-size: 12px;
    color: #fff;
    line-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

</style>